<!--
  -    Copyright (c) 2018-2025, hycloud All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: hycloud
  -->
<template>
    <div class="execution housing-table">
        <basic-container>
            <avue-crud ref="crud"
                        v-model="form"
                       :page.sync="page"
                       :data="tableData"
                       :permission="permissionList"
                       :table-loading="tableLoading"
                       :option="tableOption"
                       @on-load="getList"
                       @search-change="searchChange"
                       @refresh-change="refreshChange"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       @row-update="handleUpdate"
                       @row-save="handleSave"
                       @row-del="rowDel"
                       :before-open="beforeOpen">
                        <template
                            slot="housingIdForm"
                            slot-scope="scope">
                            <el-button type="primary" @click="getHouse">选择集体宿舍</el-button>
                        </template>
            </avue-crud>
        </basic-container>
        <el-dialog
            :visible.sync="modalHouse"
            v-if="modalHouse"
            title="集体宿舍"
            width="1300px"
            top="2vh"
             @close="close"
            :close-on-click-modal="false"
            append-to-body>
            <a-table 
                :row-key="'housingId'"
                :columns="columns"
                :scroll="{ y: 'calc(100vh - 364px)' }"
                :data-source="allmemberList"
                :row-selection="{selectedRowKeys: selectedRowKeys, type: 'radio', onChange: selectMembers,columnTitle:' '}"
                bordered
                :pagination="page2"
                :loading="loading"
                @change="handleTableChange">
                <template slot="housingType" slot-scope="text,record">
                    <span>
                    {{ record.housingTypeName }}
                    </span>
                </template>
                <template slot="structure" slot-scope="text,record">
                    <span>
                    {{ record.strueName }}
                    </span>
                </template>
                <template slot="toward" slot-scope="text,record">
                    <span>
                    {{ record.towaName }}
                    </span>
                </template>
                <template slot="status" slot-scope="text,record">
                    <span>
                    {{ record.statusName }}
                    </span>
                </template>
             </a-table>
            <div class="btn-footer">
                <el-button type="primary" @click="dataSubmit">确 定</el-button>
                <el-button @click="close">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {fetchList, addObj, putObj, delObj} from '@/api/housing/housingbed'
    import {fetchList as fetchList1} from '@/api/housing/housing'
    import {tableOption} from '@/const/crud/housing/housingbed'
    import {mapGetters} from 'vuex'
    import {findByvalue} from '@/util/util'
    import { remote } from "@/api/admin/dict";

    export default {
        name: 'housingbed',
        data() {
            return {
                loading: false,
                searchForm: {},
                page2: {
                    total: 0, // 总页数
                    current: 1, // 当前页数
                    pageSize: 20, // 每页显示多少条,
                    isAsc: false// 是否倒序
                },
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                form: {},
                selectedRowKeys: [],
                allmemberList: [],
                chosememberList: [],
                columns: [
                    {
                    "title": "地址",
                    "dataIndex": "address",
                    "key": "address",
                    width: 250,
                    },	  {
                    "title": "房号",
                    "dataIndex": "roomNumber",
                    "key": "roomNumber",
                    },	  {
                    "title": "房屋类型",
                    "dataIndex": "housingType",
                    "key": "housingType",
                    scopedSlots: { customRender: 'housingType' },
                    },	  {
                    "title": "室内结构",
                    "dataIndex": "structure",
                    scopedSlots: { customRender: 'structure' },
                    "key": "structure",
                    },	  {
                    "title": "朝向",
                    "dataIndex": "toward",
                    scopedSlots: { customRender: 'toward' },
                    "key": "toward",
                    },	  {
                    "title": "建筑面积",
                    "dataIndex": "constructionArea",
                    "key": "constructionArea",
                    },	  {
                    "title": "使用面积",
                    "dataIndex": "usageArea",
                    "key": "usageArea",
                    //  },	  {
                    // "title": "分摊面积",
                    // "dataIndex": "sharingArea",
                    // "key": "sharingArea",
                    //  },	  {
                    // "title": "房间面积",
                    // "dataIndex": "roomArea",
                    // "key": "roomArea",
                    //  },	  {
                    // "title": "实租面积",
                    // "dataIndex": "rentArea",
                    // "key": "rentArea",
                    //  },	  {
                    // "title": "预设租金",
                    // "dataIndex": "defaultRent",
                    // "key": "defaultRent",
                    }],
                page1: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20, // 每页显示多少条,
                    isAsc: false// 是否倒序
                },
                permissionList1:{
                    delBtn: false,
                    addBtn: false,
                    editBtn: false
                },
                optionsHouseType: [],
                optionStru: [],
                optionsTowa: [],
                optionsStatus: [],
                listLoading: true,
                list: [],
                modalHouse: false,
                tableLoading: false,
                tableOption: tableOption
            }
        },
        computed: {
            ...mapGetters(['permissions']),
            permissionList() {
                return {
                    addBtn: this.vaildData(this.permissions.act_housingbed_add, false),
                    delBtn: this.vaildData(this.permissions.act_housingbed_del, false),
                    editBtn: this.vaildData(this.permissions.act_housingbed_edit, false)
                };
            }
        },
        created() {
            this.init()
            this.eventBusHandle()
        },
        mounted() {
            this.tableOption.height = this.tableHeight() + 10
        },
        methods: {
            init() {
                remote('housing_structure').then(response => {
                    this.optionStru = response.data.data
                })
                remote('housing_toward').then(response => {
                    this.optionsTowa = response.data.data
                })
                remote('housing_use_status').then(response => {
                    this.optionsStatus = response.data.data
                })
                remote('housing_type').then(response => {
                    this.optionsHouseType = response.data.data
                })
            },
            eventBusHandle () {
                const _this = this
                eventBus1.$off('changeHeight').$on('changeHeight', function (data) {
                    setTimeout(function(){
                        if (document.getElementsByClassName("el-table")[0]) {
                            document.getElementsByClassName("el-table")[0].style.height = _this.tableHeight() + 10 + 'px'
                        }
                    }, 500)
                })
            },
            beforeOpen(show, type, a) {
                let self = this
                if (type == "edit" && self.form.address) {
                    this.selectedRowKeys = [self.form.housingId]
                    this.chosememberList = Object.assign([],  [self.form])
                }
                show();
            },
            getHouse() {
                this.getmemberList(this.page2)
                this.modalHouse = true
            },
            close() {
                this.selectedRowKeys = []
                this.chosememberList = []
                this.modalHouse = false
            },
            getTypeName(id) {
                let list =  this.optionsHouseType.filter(item => {
                    return item.categoryId === id
                })
                return list.length > 0 ? list[0].name : ''
            },
            selectMembers(selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.chosememberList = selectedRows
            },
            handleTableChange(pagination, filters, sorter) {
                this.page2.current = pagination.current
                this.getmemberList(this.page2)
            },
            dataSubmit() {
                if (this.chosememberList.length > 0 ){
                    let att = Object.assign({}, this.chosememberList[0])
                    this.form.address = att.address
                    this.form.housingId = att.housingId
                    this.form.roomNumber = att.roomNumber
                    this.form.housingType = att.housingType
                    this.form.structure = att.structure
                    this.form.toward = att.toward
                    this.form.constructionArea = att.constructionArea
                    this.form.usageArea = att.usageArea
                }
                this.close()
            },
            getList(page, params) {
                this.tableLoading = true
                fetchList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm )).then(response => {
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
            },
            rowDel: function (row, index) {
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delObj(row.bedId)
                }).then(data => {
                    this.$message.success('删除成功')
                    this.getList(this.page)
                })
            },
            handleUpdate: function (row, index, done,loading) {
                putObj(row).then(data => {
                    this.$message.success('修改成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            handleSave: function (row, done,loading) {
                if (this.form.housingId){
                    addObj(row).then(data => {
                        this.$message.success('添加成功')
                        done()
                        this.getList(this.page)
                    }).catch(() => {
                        loading();
                    });
                } else {
                    this.$message.error('请选择集体宿舍')
                    loading()
                }
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize
            },
            currentChange(current){
                this.page.currentPage = current
            },
            searchChange(form, done) {
                this.searchForm = form
                this.page.currentPage = 1
                this.getList(this.page, form)
                done()
            },
            refreshChange() {
                this.getList(this.page)
            },
            getmemberList(page, params) {
                fetchList1(Object.assign({
                    current: page.current,
                    size: page.pageSize,
                    housingType: '2'
                }, params)).then(response => {
                    response.data.data.records.map(item => {
                        item.housingTypeName = findByvalue(this.optionsHouseType, item.housingType)
                        item.strueName = findByvalue(this.optionStru, item.structure)
                        item.towaName = findByvalue(this.optionsTowa, item.toward)
                        item.statusName = findByvalue(this.optionsStatus, item.status)
                    })
                    this.allmemberList = response.data.data.records
                    this.page2.total = response.data.data.total
                })
            }
        }
    }
</script>
<style lang="scss">
.btn-footer{
    text-align: center;
}
</style>